<template>
    <div>
        <div class="page_top">
            <div class="left_btn" @click="back">
                <img src="../../assets/image/back.png" alt=""/>
            </div>
            <crumbs basetitle="渠道管理" title="渠道保司"></crumbs>
        </div>
        <div class="w-full box-border p-16px flex gap-16px flex-wrap">
            <div
                class="w-390px box-border min-h-355px rounded-8px flex-no-shrink border-dashed border-2px border-#EAEAEF bg-#ffffff px-24px py-22px flex flex-col items-center justify-center gap-20px">
                <img src="./img/add.png" class="w-24px h-24px" alt=""/>
                <div class="text-#565868 text-14px">点击添加渠道信息</div>
            </div>
            <div v-for="(item,i) in dataList" :key="i"
                 class="w-390px box-border min-h-355px rounded-8px bg-#ffffff px-24px py-22px flex-no-shrink">
                <div class="flex justify-between items-start mb-20px">
                    <div class="flex items-center gap-6px">
                        <img class="rounded-6px w-50px h-50px"
                             src="https://pic.imgdb.cn/item/660cc5149f345e8d03b0ea92.jpg" alt="">
                        <div class="flex flex-col gap-8px">
                            <div class="text-#3D3D3D text-16px font-bold">111</div>
                            <div class="text-#9497B1 text-14px">222</div>
                        </div>
                    </div>
                    <img class="w-16px h-16px cursor-pointer" @click="onEdit" src="./img/edit-icon.png" alt="">
                </div>
                <div class="w-full box-border bg-#FAFAFC rounded-4px flex items-center py-16px mb-16px">
                    <div
                        class="flex flex-1 flex-col items-center justify-center gap-8px border-r-solid border-r-#DEE0E3 border-r-0.5px">
                        <div class="text-#565868 text-12px">累计消耗</div>
                        <div class="text-16px text-#202536">￥856846464.00</div>
                    </div>
                    <div
                        class="flex flex-1 flex-col items-center justify-center gap-8px border-l-solid border-l-#DEE0E3 border-l-0.5px">
                        <div class="text-#565868 text-12px">长期保剩余保费</div>
                        <div class="text-16px text-#202536">￥856846464.00</div>
                    </div>
                </div>
                <div class="flex items-center gap-10px cursor-pointer mb-16px">
                    <div class="text-#9EAFFA btext-14px" @click="onToDetail">已连接：4</div>
                    <img src="./img/set-icon.png" class="w-16px h-16px" alt="">
                </div>
                <div class="text-12px text-#3d3d3d mb-16px">
                    <div>推送（POST）</div>
                    <div>通过子弹CRM，将数据直接推送到（蓝工盾系统）平台设置的接收APl。</div>
                </div>
                <div class="flex flex-col gap-8px items-center justify-center">
                    <el-button type="warning" class="!w-190px" @click="onRecharge">充值</el-button>
                    <el-button class="!ml-0 !w-190px" @click="onWithdrawDeposit">提现</el-button>
                </div>
            </div>
        </div>
        <withdrawDepositDialog v-model:show="isShowWithdrawDeposit"></withdrawDepositDialog>
        <rechargeDialog v-model:show="isShowRecharge"></rechargeDialog>
    </div>
</template>

<script setup lang="ts">
import {ref} from "vue";
import {useRouter} from "vue-router";
import crumbs from "../../components/crumbs.vue";
import withdrawDepositDialog from "./withdraw-deposit-dialog/withdraw-deposit-dialog.vue";
import rechargeDialog from "./recharge-dialog/recharge-dialog.vue";
const isShowWithdrawDeposit = ref(false);
const isShowRecharge = ref(false);
const router = useRouter();
const dataList = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 0])
const onEdit = () => {
    console.log('编辑')
}
const onRecharge = () => {
    console.log('充值')
    isShowRecharge.value = true;
}
const onWithdrawDeposit = () => {
    console.log('提现')
    isShowWithdrawDeposit.value = true;
}
const onToDetail = () => {
    console.log('详情')
    router.push({
        path: '/channel-manager-detail'
    })
}
const back = () => {
    window.history.back();
};
</script>

<style scoped></style>